<script setup>
import { ref } from 'vue'
import axios from 'axios'
// TODO: 编辑

// 控制弹框打开关闭
//2.因为在父组件已经通过ref引用了子组件，可以获取子组件的这个属性
//但是，一般不是直接操作属性值
const dialogVisible = ref(false)


//4.数据传过来了，想绑定到当前表单中.要准备form
const form = ref({
  // 字段不是瞎传的，要跟父组件的name和place保持一致
  name:'',
  place:'',
  id:''
})

//而是单独调用一个方法
// 接受父组件传过来的实参
const open = (row) =>{
  dialogVisible.value = true;
  //5.把form赋值
  form.value.name = row.name
  form.value.place = row.place
  form.value.id = row.id
}

//3.准备当前组件的响应事件

//因为现在这些方法属性都是封闭的
//所以需要defineExpose抛出，父组件才能调用
defineExpose({
  open
})

//8.获取父组件的名字‘
const emit = defineEmits(['on-update'])

//6.给确定一个函数更新
const onUpdate =async() =>{
  //1.收集表单数据  调用接口
  await axios.patch(`/edit/${form.value.id}`, {
    name: form.value.name,
    place: form.value.place,
  })
  //2.关闭弹窗
  dialogVisible.value = false;
  //3.通知父组件做列表更新  -*------*子传父
  emit('on-update')
}
</script>

<template>
  <el-dialog v-model="dialogVisible" title="编辑" width="400px">
    <el-form label-width="50px">
      <el-form-item label="姓名">
        <!-- 5.双向绑定赋值 -->
        <el-input placeholder="请输入姓名"  v-model="form.name"/>
      </el-form-item>
      <el-form-item label="籍贯">
        <el-input placeholder="请输入籍贯"  v-model="form.place"/> 
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      <!-- 7.绑定函数 -->
        <el-button type="primary" @click="onUpdate">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-input {
  width: 290px;
}
</style>
